---
title: Avkrysningsboks
image: /bilder/brukerveiledning/oppgaver/oppgaver_header.png
---

<Frame>
  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
</Frame>

Brukes når en bruker trenger å velge flere verdier fra flere alternativer.

<Tabs>
<Tab title="Usage">

```jsx
import { Checkbox } from "twenty-ui/display";

export const MyComponent = () => {
  return (
    <Checkbox
      checked={true}
      indeterminate={false}
      onChange={() => console.log("onChange function fired")}
      onCheckedChange={() => console.log("onCheckedChange function fired")}
      variant="primary"
      size="small"
      shape="squared"
    />
  );
};
```

</Tab>
<Tab title="Props">

| <span>Egenskaper</span> | Type                  | Beskrivelse                                                                                                                       |
| ----------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| merket                  | <span>boolean</span>  | Indikerer om avkrysningsboksen er merket                                                                                          |
| ubestemt                | <span>boolean</span>  | Indikerer om avkrysningsboksen er i en ubestemt tilstand (verken merket eller ikke merket)                     |
| <span>onChange</span>   | <span>funksjon</span> | Tilbakekallingsfunksjonen du ønsker å utløse når avkrysningsboksens tilstand endres                                               |
| vedMerketEndring        | <span>funksjon</span> | Tilbakekallingsfunksjonen du ønsker å utløse når `checked`-tilstanden endres                                                      |
| "variant"               | <span>streng</span>   | Den visuelle stilvarianten av boksen. Alternativene inkluderer: `primær`, `sekundær` og `tertiær` |
| størrelse               | <span>streng</span>   | Størrelsen på avkrysningsboksen. Har to alternativer: `small` og `large`                          |
| form                    | <span>streng</span>   | Formen på avkrysningsboksen. Har to alternativer: `squared` og `rounded`                          |

</Tab>
</Tabs>
